import { Component, OnInit, ViewChild, TemplateRef } from '@angular/core'
import { ActivatedRoute, Router } from '@angular/router'

import { DetailTabClass } from '@shared/classes/DetailTabClass'
import { MerchantCommon } from '@shared/interfaces/merchant'
import { PageService } from '@shared/services/page.service'
import { DataService } from '@shared/services/data.service'
import { I18NService } from '@core'

@Component({
  selector: 'app-merchant-detail-tab-trade',
  templateUrl: './tab-trade.component.html',
})
export class MerchantDetailTabTradeComponent extends DetailTabClass<MerchantCommon> implements OnInit {
  fields = { authPassword: '1' }
  @ViewChild('operate') operate: TemplateRef<void>

  constructor(
    public pageService: PageService,
    public route: ActivatedRoute,
    private router: Router,
    private dataService: DataService,
    private i18n: I18NService,
  ) {
    super(pageService, route)
  }

  ngOnInit() {
    this.initialData()
  }

  initialData() {
    this.dataService.merchant$.value$.subscribe(merchant => {
      this.data = merchant.common
      this.initialColumns()
      this.setEdit(this.fields.authPassword, 1)
      this.setupauthPassword()
    })
  }

  setupauthPassword(): void {
    const { tradeInfo } = this.data
    this.columns[this.fields.authPassword].push([
      {
        span: 20,
        label: 'BIZ.MERCHANT.OTHER.TRADE.AUTH_CODE',
        labelI18n: 'BIZ.MERCHANT.OTHER.TRADE.AUTH_CODE',
        value: tradeInfo.authPassword ? '******' : '-',
      },
      {
        span: 4,
        label: 'GENERAL.INFO.OPERATION',
        labelI18n: 'GENERAL.INFO.OPERATION',
        operate: true,
        template: this.operate,
        acl: ['api.put.camel.merchant.one.auth_password'],
      }
    ])
  }

  goEdit(): void {
    this.router.navigate(['./edit'], { relativeTo: this.route })
  }

  onCancel() {

  }

  onSubmit() {

  }

  initialColumns() {
    /*
    * 这个columns是用来收集所有需要display在这个tab里面的数据.
    * 比如 "交易币种转换" = '1', 然后交易币种转换里有一个Array = [商户交易币种, 转换交易币种, 转换汇率, 等等] 然后他在columns里就是
    * {'1': [[{商户交易币种, 转换交易币种, 转换汇率, 等等}]]}
    */
    // 现在这个trades component需要展示2个field. 这里创建2个空的Array在this.columns里的field
    for (const key in this.fields) {
      this.columns[this.fields[key]] = []
    }
  }

  trans(key: string, params?: Object): string {
    return this.i18n.fanyi(key, params)
  }
}
